<!-- 人气推荐 -->
<template>
  <div class="home-hot">
    <homePanel title="人气推荐" sub-title="人气爆款 不容错过">
      <transition name="fade" ref="target">
        <div class="recommend-list" v-if="HOTLIST.length">
          <div
            class="recommend-list-item"
            v-for="item in HOTLIST"
            :key="item.id"
          >
            <router-link to="/">
              <img :src="item.picture" alt="" />
              <p>{{ item.title }}</p>
              <p class="price">{{ item.alt }}</p>
            </router-link>
          </div>
        </div>
        <homeSkeleton v-else />
      </transition>
    </homePanel>
  </div>
</template>

<script setup name:home-hot>
import { lazyLoadingFn } from '@/hooks/index.js'
import homeSkeleton from "@/views/Home/components/home-skeleton";
import homePanel from "@/views/Home/components/home-panel";
import { findHot } from "@/api/home.js";

// 懒加载请求，组件
const { target, data: HOTLIST } = lazyLoadingFn(findHot)
</script>

<style lang="less">
.home-hot {
  .recommend-list {
    display: flex;
    justify-content: space-between;
    .recommend-list-item {
      height: 406px;
      width: 306px;
      .hoverShadow ();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      p:last-child {
        color: #9d9d9d;
        font-size: 18px;
      }
    }
  }
}
</style>
